<template>
  <div class="hello">
    <div id="box" v-html="content" class="box">

    </div>
  </div>
</template>
  
<script>
import { timePanelSharedProps } from 'element-plus/es/components/time-picker/src/props/shared';

//str填充内容，利用<作为换行符
let textStr =
  "......她喜欢吃辣，喜欢卤味，最喜欢螺蛳粉,她的麻辣烫和烤鱼里总要放一块面，她喜欢在风景好的地方相遇。/她喜欢奶茶，有时候是奶绿，有时候是奶盖，有时候是霓裳茶舞，她要的只是三分糖，可以加的是珍珠。/她喜欢水果捞,爱加酸奶和芋圆，不喜欢水果捞里的爆珠，可以放烧仙草但不会加椰果。/......我的记性很差，所以每次发消息都会下意识地先点到你的聊天框，然后再想起来要做什么。/......后来才发现，不知从什么时候开始，我的生活已经全部都倾倒在细雨和花丛中。";
let strp = "";
let i = 0;
export default {
  data() {
    return {
      content: '',
      id:null
    }
  },
  mounted() {
    let printid = setInterval(() => {
      this.print1();
      if (i == textStr.length) clearInterval(printid);
    }, 90);

    // 利用光标闪动速度，默认模拟电脑正常光标闪动
    setTimeout(() => {
      this.id = setInterval(this.print2, 1060); //注意setInterval内部直接写函数的时候是直接写函数名不加括号的。
    }, (textStr.length - 1) * 90);
  },
  destroyed(){
    console.log('88888888')
    clearInterval(this.id);
    this.id = null;
  },
  methods: {
    print2() {
      console.log('99')
      setTimeout(() => {
        this.content = strp + " ";
      }, 100);
      setTimeout(() => {
        this.content = strp + "|";
      }, 600);
    },

    print1() {
      if (textStr[i] != "/") {
        strp += textStr[i];
        this.content = strp + "|";
      } else {
        this.content = strp + "<br><br>" + "|";
        strp += "<br><br>";
      }
      i++;
    }

  }
}
</script>
  

<style scoped>
#box {
  color: rgb(255, 255, 255);
  padding: 2%;
  width: 330px;
  height: 400px;
  box-shadow: 0 8px 32px 0 rgba(103, 223, 234, 0.37);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  /* background-image: linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%); */
  background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
}
</style>
  